<template>
  <div ref="chart" class="charts"></div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      fontSize:14,
      padding:false,
    };
  },
  mounted() {
    this.initCharts(this.data);
  },
  methods: {
    ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=14;
              this.padding=true;
          }
 },
    initCharts(n) {
      const chart = this.$refs.chart;
      var that = this;
      this.ScreenWidth();
      if (chart) {
        var myChart = this.$echarts.init(chart); //推荐
        var colors = [
          "rgb(255, 154, 54)",
          "rgb(2, 254, 75)",
          "rgb(1, 255, 255)",
          "rgb(92, 102, 251)",
          "rgb(92, 102, 251)",
          "rgb(92, 102, 251)",
        ];
        var seriesData = [];
        const { list } = n;

        list.map((item, i) => {
          // //console.log(item);
          seriesData.push({
            name: item.name || item.alarm_name,
            value: item.value || item.num,
            itemStyle: {
              normal: {
                // color: colors[i],
                shadowBlur: "90",
                shadowColor: "rgba(0,0,0,0.8)",
                shadowOffsetY: "30",
                label: {
                  textStyle: {
                    color: "#ffffff",
                    fontSize: that.fontSize,
                    fontWeight: "bolder",
                  },
                },
              },
            },
          });
        });
        const option = {
          title: {
            text: n.name,
            left: "left",
            textStyle: {
              color: "#fff",
              fontWeight: "normal",
              fontSize: that.padding?23:that.fontSize,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: " {b} : {c} ({d}%)",
            formatter12: (params) => {
              const {
                data: { name, value },
              } = params;

              // for (var i = 0; i < params.length; i++) {
              //   res +=
              //     "<br>" +
              //     params[i].marker +
              //     params[i].seriesName +
              //     "：" +
              //     params[i].data;
              // }
              return name;
            },
            position: function (point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置

              if (x < boxWidth) {
                //左边放不开
                posX = 5;
              } else {
                //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) {
                //上边放不开
                posY = 5;
              } else {
                //上边放得下
                posY = y - boxHeight;
              }

              return [posX, posY];
            },
          },

          series: {
            type: "pie",
            radius: ["38%", "48%"],
            center: ["46%", "60%"],
            labelLine: {
              //图形外文字线
              normal: {
                length: 6,
                length2: 5,
              },
            },
            label: {
              alignTo: "edge",
              normal: {
                formatter: " {b|{b}}", //图形外文字上下显示
                borderWidth: 2,
                borderRadius: 2,

                rich: {
                  a: {
                    color: "#333",
                    fontSize:that.fontSize,
                    lineHeight: 0,
                  },
                  b: {
                    //name 文字样式
                    fontSize: that.fontSize,
                    lineHeight: 0,
                    color: "#CDCDD0",
                  },
                  // c: {
                  //   //value 文字样式
                  //   fontSize: 14,
                  //   lineHeight: 0,
                  //   color: "#63BF6A",
                  // },
                },
              },
            },
            label1: {
              alignTo: "edge",

              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 0,
              rich: {
                time: {
                  fontSize: that.fontSize,
                  color: "#fff",
                },
              },
            },
            // labelLine: {
            //   length: 6,
            //   length2: 0,
            //   maxSurfaceAngle: 80,
            // },
            // labelLayout: function (params) {
            //   var isLeft = params.labelRect.x < myChart.getWidth() / 2;
            //   var points = params.labelLinePoints;
            //   // Update the end point.
            //   try {
            //     points[2][0] = isLeft
            //       ? params.labelRect.x
            //       : params.labelRect.x + params.labelRect.width;
            //   } catch (error) {}
            //   return {
            //     labelLinePoints: points,
            //   };
            // },
            data: seriesData,
          },
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
